<template>
  <el-dialog v-model="visible" title="运单详情" :before-close="handleClose">
    <h3>司机信息</h3>
    <p>姓名：{{ tpData.driver.name }}，联系电话：{{ tpData.driver.phone }}，状态：{{ tpData.driver.state === 1 ? '工作中' : '空闲' }}。</p>
    <h3>货车信息</h3>
    <p>车牌号：{{ tpData.truck.num }}，生产厂商：{{ tpData.truck.type }}，
      所属公司：{{ tpData.truck.owner }}，状态：{{ tpData.truck.state === 1 ? '使用中' : '空闲' }}。</p>
    <h3>状态信息</h3>
    <el-timeline>
      <el-timeline-item v-for="(activity, index) in activities"
                        :key="index" :color="activity.color" :timestamp="activity.timestamp">
        {{ activity.content }}
      </el-timeline-item>
    </el-timeline>
    <h3>发货仓库</h3>
    <p>仓库名：{{ tpData.wfrom.name }}，地址：{{ tpData.wfrom.addr }}。</p>
    <h3>收货仓库</h3>
    <p>仓库名：{{ tpData.wto.name }}，地址：{{ tpData.wto.addr }}。</p>
    <h3>路线导航</h3>
    <p>空</p>
  </el-dialog>
</template>

<script>
export default {
  name: "TransportDetail",
  props: ['tpData', 'closeDialog'],
  data() {
    return {
      visible: false,
      activities: [],
    }
  },
  methods: {
    handleClose() {
      this.visible = false;
      this.closeDialog();
    },
  },
  mounted() {
    console.log('start create')
    this.visible = true;
    this.activities.push({
      content: '运单创建',
      timestamp: '',
      color: '#fff58b'
    })
    if (this.tpData.transport.depart != null) {
      this.activities.push({
        content: '司机接单',
        timestamp: this.tpData.transport.depart,
        color: '#a5ffa5'
      })
      if (this.tpData.transport.arrive != null) {
        this.activities.push({
          content: '到达仓库',
          timestamp: this.tpData.transport.arrive,
          color: '#b6b6b6'
        })
      }
    }
    console.log('finish create')
    console.log(this.visible)
    console.log(this.tpData)
    console.log(this.activities)
  }
}
</script>

<style scoped>

</style>